【第2533期】前端轻研发实践

前言

周末愉快，扩展眼界篇。今日前端早读课文章由蚂蚁集团@默茗分享，由公号：支付宝体验科技授权分享。

@默茗,目前负责支小宝、理财师相关的理财服务业务，专注于追求优雅的人机交互体验和建设高效的前端工程体系。

正文从这开始~~

什么是前端轻研发

开篇

通过对比来解释一下什么是前端轻研发的定义，后面会展开一下目前我们在前端轻研发上的一些落地实践。
常规研发模式

常规研发模式视频

常规研发模式（react+node）

• 常规的研发模式是代码coding、联调、构建、devops等在时间线上混合操作，人肉串联和操作流程切换带来的损耗是日常效率瓶颈的问题点，也是前端业务研发时开发者感觉很繁重的主要原因。

• 另外就是纯js语言，更偏向于让机器理解，而承载的业务语义则十分依赖注释和人的主动理解。巨型项目接手时，应用规模带来的理解梳理的成本是非常巨大的。

轻研发引子

常规研发，在联调、接手维护、代码理解、工程运维等几个角度存在或多或少的“重”投入情况。

结合自身业务特点和普遍性的痛点，数字金融前端团队针对性的定制了一套前端轻研发解决方案尝试通过如下
手段让常规研发中"重"的部分变"轻"，提高业务研发同学的幸福感

• 工程配套，联调工具，coding外的工作更加轻量化

• 语言层面优化，让代码转换成人类更加容易理解的线性可视化形式

• 运维Faas化，不再过多关注全量构建发布、基础设施资源等

轻研发模式视频

轻研发模式，"轻"的差异

• 创建一套业务编程环境，前后端代码混编，同时领域模型和视图可以被自动识别成“节点”，形成业务数据流转的可视化能力

• 工程配套，内置的模拟器联调环境，h5+bff的faas一键构建，增量部署，开发者与构建/部署实现基本隔离

• 开发者只需要关注数据、逻辑，其余的所需要的能力轻研发平台全部处理掉

轻研发一览

轻研发的概览

轻研发一览

演进:

• 从常规研发模式升级演进而来，目标解决之前提到的种种“重”的痛点

定位:

• 轻研发体系的位置是在前端技术体系和业务之间。

• 对技术侧，持续化的接入能力通过定义能力而非传统的技术调用，来保障轻研发可以快速统一的接入各种前端体系技术，并通过各种能力插件供给到使用者，以期降低研发时的编码复杂度；

• 对业务侧，自动化的交付模式建立端与BFF统一的函数级构建部署能力，通过更加轻量的运维注意力来提升研发交付效率。

核心概念:

• 卡片化：对应我们具体的交付产物，体验适配层和体验层两套运行时容器消费构建产物，建立统一的交付链路和标准。

• 函数级：通过我们设计的一种js增强语言来更加优雅的把开发者所需要面对的研发场景降维到函数级别, 在node关注Fass，在h5关注Component相关研发。

• 一体化：回归传统，采用前后端代码一体式研发模式，自动化处理编码、调试及发布过程中原先所需的人肉管理各种依赖及串并行操作。

关键能力：

• 代码及文档：业务知识的充分沉淀

• 可视化编程环境：机器高效理解到人&机高效理解的升级与演进

• 能力底盘：简单表象背后一定有复杂内核支撑，通过插件建立技术复杂度收敛机制，通过能力接口而非原始api输出给开发者使用

轻研发关键设计

代码即文档

轻研发的关键设计也是核心理念——“文档即代码，代码即文档”。

业务代码最重要的是什么，传承有序。而文章最重要的是什么，知识点。在轻研发的解决方案中，我们通过代码即文档的方式，让代码向文章一样可读。凝结前人经验，让后人专注在巨人的肩膀上，让二次创作的使用起来达到文章本天成，妙手偶得之的感觉。

设计上我们参考了eve workspaces （链接地址：http://play.witheve.com/#/examples/quickstart.eve），建立一套编程环境，从机器理解代码，变成人可理解的线性可视化（解决人的思维模式和机器的差异）：

开发者编写的依旧是代码，开发者可以在可视化编程环境中混编js、less、jsx、markdown等多种相关语言形成数据节点、样式节点、ui节点以及文档节点，形成更好的沉淀，业务节点可以通过snapshot引用传承。

js语言加强

从常规研发模式到轻研发模式，只有工程化设计是远远不够的，为此我们设计了一个js增强语言来支持“代码即文档”的愿景

我们这套语言增强命名Glue，中文是胶水，希望通过它可以快速粘合业务代码完成研发,它既是一个语言，又是一个基于“节点”运行时能力,能力上:

• 自动编排，不需要关心并发/串行。自动识别解析UI(h5)、数据（bff）节点、数据节点等

• 支持可视化，原生建立节点与DAG图的双向关系

• 从语言层面避免NPE问题

• 支持高精度计算

可视化编程

单纯的节点研发并不能完成一套业务逻辑，而在轻研发的编程环境中，数据流转是可以自动生成的：

• DAG是描述工程或者系统进行过程的一中有效工具。而编程环境节点化的设计可以通过节点AST转换,把数据节点、UI节点之间的关系直接通过DAG图表示。在研发角度保障了procode编码的自有度，而在调试角度则利用DAG节点可视化及相关节点的Mock能力，赋予编程环境nocode的可视化编排交互能力。k

• 开发者只需要关注activity，project会自动构建，直接有效的降低了前面有提到的协同成本问题。

可视化编程的基础要素：

• 节点检视，开发即调试【代码自动可视化】

• 节点反向修改代码【lowcode干预】

• 提供可配置的标准化能力：mock、异常处理，超时处理，日志打印，减少代码噪音

插件体系

• 根据研发流程设计了plugin机制，可以方便的在流程和能力两个角度去接入插件。联通各个平台，让轻研发更具备生命力活力

• 开发者可以根据需求自己编写插件即可以取悦自己，也能取悦用户

前端轻研发总结

定位&场景

劣势：

• 常规研发中只专注业务样式静态页（低业务复杂度场景）不适合

• 2d、3d强互动场景并不适合

优势：

• 三个关键的能力点，可以保证轻研发对适合场景提供非常高效支持：

• 贴合重业务、多迭代场景，同时对H5+node的前后端一体研发场景可以实现1+1>2的提效

关于本文
作者：@默茗
原文：https://mp.weixin.qq.com/s/ngSgzh4Oa19n8NAG7V8iug

为你推荐

欢迎自荐投稿VX:zhgb_f2er，前端早读课等你来